// 进入游戏：点击开始按钮，关闭遮罩层
// 遮罩层
const mask = document.querySelector(".mask");
// 开始按钮
const startBtn = document.querySelector(".start");
// 存储文字
const fontArr = ["黄","红","黑","蓝","绿"];
// 存储颜色
const colorArr = ["yellow","red","black","blue","green"];
// 获取div
const main = document.querySelector("#main");
// 获取ul
const ul = document.querySelector("ul");
// 单击按钮
startBtn.onclick = function () {
    // 关闭遮罩层
    mask.style.display = "none";
    // 随机产生文字
    main.innerText = fontArr[getRandom()];
    // 随机产生的颜色
    main.style.color = colorArr[getRandom()];// 0 --4

    // 将文字打乱交给一个数组
    const copyFontArr = [...fontArr].sort(()=>Math.random()-0.5);
    // 将颜色打乱交给一个数组
    const copyColorArr = [...colorArr].sort(()=>Math.random()-0.5);
    // 渲染
    ul.innerHTML = copyFontArr.map((item,index)=>(`
        <li style="color:${copyColorArr[index]}">${item}</li>
    `)).join("");

    // 为li增加单击事件
    document.querySelectorAll("li").forEach((item)=>{
        item.onclick = function(){
            // 判断点击的文字是否与id为main的元素的文字颜色一致
            // 点击的文字是红，那么main元素的文字颜色需要是red
            // 需要获取点击的文字是什么？
            // console.log(this.innerText);

            // 需要获取main当中的文字颜色
            // console.log(main.style.color);
            // 判断下标：
            // 点击文字下标
            const fontIndex = fontArr.findIndex(v=>v===this.innerText);
            // main当中的颜色下标
            const colorIndex = colorArr.findIndex(v=>v === main.style.color);
            if(fontIndex === colorIndex){
                console.log("正确");
            }else{
                console.log("失败");
            }
        }
    })
}
// 获取随机数字
const getRandom = function(){
    return Math.floor(Math.random()*fontArr.length);
}